<template>
    <div class="view_member">
        <card title="会员列表">
            <template #actions>
                <el-input v-model="queryString" placeholder="按会员账号查询" prefix-icon="el-icon-search" clearable />
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" label="#" width="48" align="center" />
                    <el-table-column prop="nickName" label="会员账号" />
                    <el-table-column prop="phone" label="手机号码" />
                    <el-table-column label="商家审核状态">
                        <template #default="{ row }">
                            <el-tag :type="memberMerchantStatus[row.provider].tagType">
                                {{ memberMerchantStatus[row.provider].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="实名状态">
                        <template #default="{ row: { certification } }">
                            <el-tag :type="memberRealNameAuthenticationStatus[+certification].tagType">
                                {{ memberRealNameAuthenticationStatus[+certification].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="账号状态">
                        <template v-slot="{ row: { enabled } }">
                            <el-tag effect="dark" :type="memberEnabledStatus[+enabled].tagType">
                                {{ memberEnabledStatus[+enabled].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="账户状态">
                        <template v-slot="{ row: { accountNonLocked } }">
                            <el-tag effect="dark" :type="memberLockedStatus[+accountNonLocked].tagType">
                                {{ memberLockedStatus[+accountNonLocked].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="注销状态">
                        <template v-slot="{ row: { deleteStatus } }">
                            <el-tag :type="memberCancellationStatus[deleteStatus].tagType">
                                {{ memberCancellationStatus[deleteStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="text" @click="edit(row)">编辑</el-button>
                            <el-button type="text" @click="view(row.memberId)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 对话框 -->
        <el-dialog :visible.sync="visible" title="编辑会员账号" @closed="handleClosed">
            <template #default>
                <div class="input_box">
                    <div class="input_box-label">账号选项</div>
                    <el-checkbox v-model="formData.isDisabled"> 禁用账号</el-checkbox>
                    <el-checkbox v-model="formData.isAccountExpired"> 账号不过期 </el-checkbox>
                    <el-checkbox v-model="formData.isPasswordExpired"> 密码不过期 </el-checkbox>
                </div>
                <div class="input_box">
                    <div class="input_box-label">账户选项</div>
                    <el-checkbox v-model="formData.isLocked"> 锁定账户（锁定后不能提现） </el-checkbox>
                </div>
            </template>
            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>

        <!-- 会员详情对话框 -->
        <el-dialog :visible.sync="visible2" custom-class="details_dialog">
            <template #default>
                <div class="desc_list">
                    <div class="desc_list-top">
                        <h1 class="desc_list-title">{{ details.nickName }}</h1>
                        <p class="desc_list-subtitle">手机号码：{{ details.phone }}</p>
                    </div>
                    <dl class="desc_list-content">
                        <div class="desc_list-item">
                            <dt>商家审核状态</dt>
                            <dd>{{ memberMerchantStatus[details.provider].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>实名状态</dt>
                            <dd>{{ memberRealNameAuthenticationStatus[+details.certification].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>账号状态</dt>
                            <dd>{{ memberEnabledStatus[+details.enabled].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>账号是否过期</dt>
                            <dd>{{ details.accountNonExpired ? '不过期' : '过期' }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>密码是否过期</dt>
                            <dd>{{ details.credentialsNonExpired ? '不过期' : '过期' }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>账号是否锁定</dt>
                            <dd>{{ memberLockedStatus[+details.accountNonLocked].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>账号注销状态</dt>
                            <dd>{{ memberCancellationStatus[details.deleteStatus].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>创建时间</dt>
                            <dd>{{ details.createTime }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>真实姓名</dt>
                            <dd>{{ details.name }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>身份证号码</dt>
                            <dd>{{ details.idCard }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>身份证正反面</dt>
                            <dd>
                                <img class="id_card_picture" :src="details.positive" :alt="details.positive" />
                                <img class="id_card_picture" :src="details.back" :alt="details.back" />
                            </dd>
                        </div>
                    </dl>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { renameObjectKeys } from '../../functions';
import { getQueryOptions } from '../../mixins';

export default {
    data() {
        return {
            tableData: [],
            details: {},

            visible: false,
            visible2: false,

            formData: {
                memberId: 0,
                isDisabled: false,
                isLocked: false,
                isAccountExpired: false,
                isPasswordExpired: false,
            },
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/ums/findMember',
            paginable: true,
            params: {
                queryString: 'nickName',
            },
        }),
    ],

    computed: {
        // >>>>> 会员状态常量
        // 会员商家状态
        memberMerchantStatus() {
            return {
                1: { text: '已是商家', tagType: 'success' },
                2: { text: '未申请' },
                3: { text: '审核中', tagType: 'warning' },
                4: { text: '审核不通过', tagType: 'error' },
            };
        },

        // 会员启用状态
        memberEnabledStatus() {
            return {
                0: { text: '禁用', tagType: 'info' },
                1: { text: '正常', tagType: 'success' },
            };
        },

        // 会员锁定状态
        memberLockedStatus() {
            return {
                0: { text: '锁定', tagType: 'info' },
                1: { text: '正常', tagType: 'success' },
            };
        },

        // 会员注销状态
        memberCancellationStatus() {
            return {
                1: { text: '正常', tagType: 'success' },
                2: { text: '注销处理中', tagType: 'warning' },
                3: { text: '已注销', tagType: 'info' },
            };
        },

        // 会员实名认证状态
        memberRealNameAuthenticationStatus() {
            return {
                0: { text: '未认证', tagType: 'warning' },
                1: { text: '已认证' },
            };
        },
        // 会员状态常量 <<<<<
    },

    methods: {
        // 保存
        save() {
            let data = Object.assign({}, this.formData);

            data.isDisabled = !data.isDisabled;
            data.isLocked = !data.isLocked;

            renameObjectKeys(data, {
                isDisabled: 'enabled',
                isLocked: 'accountNonLocked',
                isAccountExpired: 'accountNonExpired',
                isPasswordExpired: 'credentialsNonExpired',
            });

            this.$post('/yxl/ums/updateMember', data).then(() => {
                this.visible = false;
                this.query();
            });
        },

        // 编辑
        edit(member) {
            this.formData.memberId = member.memberId;

            this.formData.isDisabled = !member.enabled;
            this.formData.isLocked = !member.accountNonLocked;

            this.visible = true;
        },

        // 查看会员详情
        view(memberId) {
            this.$get('/yxl/ums/findMemberDetails', { memberId }).then(res => {
                // toJpeg([res.positive, res.back]).then($res => {
                //     res.positive = $res[0];
                //     res.back = $res[1];

                // });
                this.details = res;
                this.visible2 = true;
            });
        },

        handleClosed() {
            this.formData.isAccountExpired = false;
            this.formData.isPasswordExpired = false;
        },
    },
};
</script>